<template>
    <div class="qrcode-wrapper">
        <centerHeader/>

        <div class="qrcode-wrap">
            <div class="top-wrap">
                <div class="title_box">
                    <span class="title-01">返现设置</span>
                    <i class="el-icon-arrow-down"></i>
                </div>
            </div>
            <div class="commission">
                <div style="margin-top: 15px;" class="select_query">
                    <el-input placeholder="请输入内容" v-model="search" class="input-with-select">
                        <el-button slot="append" icon="el-icon-search" ></el-button>
                    </el-input>
                </div>
                <div class="com_list">
                    <div class="cash_th">
                        <div>项目</div>
                        <div>返现设置</div>
                        <div>编辑</div>
                    </div>
                    <ul class="cash_td">
                        <li>
                            <div>双眼皮</div>
                            <div class="cash_b">15%</div>
                            <div class="action">
                                <i class="el-icon-edit-outline"></i>
                                <i class="el-icon-delete"></i>
                                <i class="el-icon-tickets"></i>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

        </div>

        <centerFooter/>
    </div>
</template>

<script type="text/ecmascript-6">
    import centerHeader from "@/views/center/components/centerHeader";
    import centerFooter from "@/views/center/components/centerFooter";
    import constant from "@/utils/constant.js";
    // 引用API文件
    import http from "@/utils/http.js";

    import QRCode from "qrcode";

    export default {
        name: "qrcode",
        data() {
            return {
                user_info: {},
                search: '',
            };
        },
        components: {
            centerHeader,
            centerFooter
        },
        methods: {

        },
        created() {}
    };
</script>

<style scoped lang="scss">
    .qrcode-wrapper {
    }

    .top-wrap {
        $letHeight: 1.3rem;

        .title-txt {
            height: $letHeight;
            line-height: $letHeight;
            text-align: center;
            background-color: $c-white-light;

            span {
                color: $c-mainC;
                display: inline-block;
                line-height: $letHeight;
                vertical-align: middle;

                &.title-01 {
                    font-size: 0.38rem;
                }
            }
        }
    }

    .main-wrap {
        @extend .cmm-border;
    }

    .img-wrap {
        width: 5rem;
        height: 5rem;
        margin: 0.4rem auto;
        overflow: hidden;
        position: relative;
        padding: 0.22rem;

        .ad-img {
            @extend .cmm-translateXY;
            width: 100%;
        }
    }

    .qrcode-box {
        text-align: center;
        width: 100%;
        .qrcode-txt {
            width: 5.15rem;
            border-radius: 0.8rem;
            background-color: $c-danger;
            font-size: 0.52rem;
            color: $c-white-light;
            $letHeight: 0.6rem;
            height: $letHeight;
            line-height: $letHeight;
            text-align: center;
            margin: 0.48rem auto;
            display: inline-block;
            letter-spacing: 0.1rem;
            font-weight: bold;
        }
    }
    .title-txt-new{
        height:1rem;
        line-height:1rem;
        text-align: center;
        background-color: $c-white-light;
        font-size: 0.32rem;
    }
    .picker{
        padding:0 10px;
        border-top: 0.15rem solid #eeeeee;
        .el-date-editor.el-input, .el-date-editor.el-input__inner{
            width:2.2rem;
        }
        /deep/.el-input__inner{
            border: none;
        }
    }
    .shop_table_header{
        display: flex;
        line-height:1rem;
        padding:0 0.2rem;
        border-bottom:1px solid #eeeeee;
        &>div.th_one{
            flex:2
        }
        &>div.th_two{
            flex:1
        }
    }
    .shop_table_table{
        &>li{
            padding:0.25rem 0.2rem;
            display: flex;
            &>div.td_one{
                flex:2;
                &>div.td_item_one{
                    margin-bottom:0.2rem;
                }
                &>div.td_item_two{
                    &>span{
                        font-size: 0.08rem;
                    }

                }
            }
            &>div.td_two{
                flex:1;
                &>div.td_item_one{
                    margin-bottom:0.2rem;
                }
                &>div.td_item_two{
                    &>span{
                        font-size: 0.08rem;
                    }

                }
            }
        }
    }
    .title_box{
        height: 0.9rem;
        line-height:0.9rem;
        font-size: 0.36rem;
        text-align: center;
    }
    .commission{
        border-top: 0.15rem solid #eeeeee;
        .com_box{
            height: 1rem;
            line-height:1rem;
            padding:0 0.3rem;
            border-bottom:1px solid #eeeeee;
            &>span{
                line-height:1rem;
                display: flex;
                justify-content: center;
            }
        }
    }
    .fl{
        float: left;
    }
    .fr{
        float: right;
    }
    .com_title{
        height: 1rem;
        line-height:1rem;
        text-align: center;
        font-size: 0.36rem;
    }
    .com_ul{
        li{
            padding:0.25rem 0.3rem;
            border-bottom:1px solid #eeeeee;
            .com_top{
                line-height:0.5rem;
                margin-bottom:0.2rem;
            }
            .com_name{
                float: left;
            }
            .com_orderId{
                font-size: 0.2rem!important;
                float: left;
            }
            .com_price{
                font-size: 0.5rem;
                color:#ff4c4c;
                float: right;
            }
            .com_time{
                float: right;
            }
        }
    }
    .com_color{
        font-size: 0.45rem;
        color:#ff4c4c;
    }
    .com_list{
        /deep/.el-tabs__nav-wrap{
            margin:0 0.25rem;
        }
        /deep/.el-tabs__nav{
            width:100%
        }
        /deep/.el-tabs__item{
            width:25%;
            text-align: center;
            height: 1rem;
            line-height:1rem;

        }
        /deep/.el-tabs__item.is-active{
            color: #ff4c4c;
            font-weight: 500;
        }
        /deep/.el-tabs__active-bar{
            background-color:#ff4c4c;
        }
        /deep/.el-tabs__nav-wrap::after{
            background-color: #ffffff;
        }
    }
    .tab_ul{
        li{
            padding:0.25rem;
            border-bottom:1px solid #eeeeee;
        }
        .tab_item_top{
            margin-bottom:0.28rem;
            .tab_item_time{
                float:left;
            }
            .tab_item_type{
                float:right;
            }
        }
    }
    .tab_item_bottom{
        display: flex;
        .tab_item_order{
            flex:1;
            text-align: left;
        }
        .tab_item_cash{
            flex: 1;
            text-align: center;
        }
        .tab_item_timer{
            flex: 1.2;
            text-align: right;
        }
    }
    .search-wrap {
        $letHeight: 1.28rem;
        height: $letHeight;
        position: relative;
        @extend .cmm-clearfix;
        background-color: $c-gray-dark;
        border-radius: 0.12rem;
        margin: 0.25rem;

        &.partial {
            width: 6.25rem;
            margin: 0.25rem 0;

            .box-m {
                width: 3.58rem;
            }
        }

        .box-l {
            @extend .cmm-translateY;
            height: $letHeight - 0.48;
            border-right: 0.02rem solid $c-mainC;
            width: 1.5rem;
        }

        .box-m {
            @extend .cmm-translateY;

            height: $letHeight - 0.48;
            width: 4.58rem;
        }

        .box-r {
            @extend .cmm-translateY;

            height: $letHeight - 0.48;
            width: 1rem;
            right: 0;

            .custom-Eicon {
                font-size: 0.8rem;
                color: #dddddd;
                line-height: 0.8rem;
            }
        }

        .cancel-btn {
            position: absolute;
            transform: translateX(100%) translateY(-50%);
            right: 0;
            top: 50%;
            line-height: 0.8rem;
            display: inline-block;
            width: 0.9rem;
            text-align: right;
            padding-right: 0.04rem;
            line-height: $letHeight - 0.48;
            background-color: transparent;
            font-size: 0.32rem;
            color: $c-mainC;
        }
    }

    $letHeight: 0.76rem;
    .search-box {
        position: relative;
        width: 100%;

        &.all {
            width: 100%;
        }

        &.partial {
            width: 3.5rem;
        }

        .txt-input {
            width: 100%;
            position: relative;
            line-height: $letHeight;
            height: $letHeight;
            font-size: 0.3rem;
            color: #999999;
            max-width: 100%;
            padding-left: 0.14rem;
            background-color: $c-gray-dark;

            &::-webkit-input-placeholder {
                font-weight: 500;
            }
            &:-moz-placeholder {
                font-weight: 500;
            }
            &::-moz-placeholder {
                font-weight: 500;
            }
            &:-ms-input-placeholder {
                font-weight: 500;
            }

            &.msg-txt {
                letter-spacing: 0.7rem;
                padding-left: 0.3rem;
                margin-top: 0.5rem;
            }
        }
        .custom-partHr {
            width: 100%;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: space-between;

            span {
                width: 0.8rem;
                display: inline-block;
                border-bottom: 0.02rem solid $c-gray-light;
            }
        }
        i {
            line-height: $letHeight;
            display: inline-block;
            color: $c-mainC;
            @extend .cmm-translateY;
            right: 0.1rem;
            left: auto;
            font-size: 0.3rem;
        }
    }
    .cash_th{
        display: flex;
        padding: 0.3rem;
        height: 1rem;
        line-height:1rem;
        border-bottom:0.013rem solid #eeeeee;
        align-items: center;
        &>div{
            flex:1;
            font-size: 0.16rem;
        }
    }
    .cash_td{
        li{
            display: flex;
            padding:0.3rem;
            height:1rem;
            line-height: 1rem;
            border-bottom:0.013rem solid #eeeeee;
            align-items: center;
            font-size: 0.3rem;
            &>div{
                flex:1;
            }
            &>div.cash_b{
                font-size: 0.4rem;
                color:#fd4d4f;
            }
            &>div.action{
                &>i{
                    margin:0 0.1rem;
                    font-size: 0.3rem;
                }

            }
        }
    }
    .select_query{
        padding:0 0.2rem;
        /deep/.el-input-group__prepend{
            width:1.6rem;
        }
        /deep/.el-input-group__append{
            width:1rem;
            text-align: center;
        }
        /deep/.input-with-select{
            height:0.8rem;
        }
        /deep/.el-input__inner{
            height:0.8rem;
            max-width:7rem;
        }
    }
</style>
